<template>
  <div class="wifi-demo">
    <!-- <top-bar
      ref="topbars"
      :leftSrc="topbarObj.leftSrc"
      :rightSrc="topbarObj.rightSrc"
      :title="topbarObj.title"
    ></top-bar>
    <div class="wifi-content" :style="'margin-top:' + marginTop + 'px'">
      <device-logo :deviceImg="deviceImg" :logoImg="logoImg"></device-logo>
      <card-view
        :list="fCardList"
        @imgClick="imgClick"
        @textClick="textClick"
        @desClick="desClick"
      ></card-view>
      <card-view
        :list="sCardList"
        @imgClick="imgClick"
        @textClick="textClick"
        @desClick="desClick"
      ></card-view>
      <card-view
        :list="tCardList"
        @imgClick="imgClick"
        @textClick="textClick"
        @desClick="desClick"
      ></card-view>
      <card-view
        :list="sCardList"
        @imgClick="imgClick"
        @textClick="textClick"
        @desClick="desClick"
      ></card-view>

    </div> -->
    <!-- <van-button type="primary" size="small">大号按钮</van-button> -->

    <slider-card
      leftTxt="亮度"
      unit="%"
      step="1"
      maxValue="60"
      :percent="percentVal"
      :isShowRange="true"
      progressColor="#000000"
      @handleTouchEnd="handleTouchEndOne($event)"
    ></slider-card>
  </div>
</template>

<script>
import sliderCard from "../../components/sliderCard.vue";
import { mapGetters, mapActions } from "vuex";
import WifiManage from "../hilink/WifiManage";
// import { Button } from "vant";
import CardView from "../../components/CardView";
import DeviceLogo from "../../components/DeviceLogo";
import TopBar from "../../components/TopBar";
export default {
  name: "wifiDemo",
  components: {
    // vanButton: Button,
    CardView,
    DeviceLogo,
    TopBar,
    sliderCard,
  },
  data() {
    return {
      consoleInfo: "wifiDemo",
      num: 10,
      percentVal: 0,
      marginTop: 0,
      topbarObj: {
        leftSrc: require("../../assets/images/ic_back.png"),
        rightSrc: require("../../assets/images/ic_nav_menu.png"),
        title: "西门子检查合作",
      },
      deviceImg: require("../../assets/images/4.png"),
      logoImg: require("../../assets/images/4.png"),
      fCardList: [
        {
          //文字
          text: "已开启",
          //描述
          des: "",
          //图片
          src: "",
          //样式
          style: null,
          //单位
          unit: "",
          //单位样式
          unitStyle: null,
          //文字样式
          textStyle: null,
          //描述样式
          desStyle: null,
          //图片样式
          srcStyle: null,
        },
        {
          text: "优",
          des: "空气质量",
          src: "",
          style: null,
          unit: "m2",
          unitStyle: null,
          textStyle: null,
          desStyle: null,
          srcStyle: null,
        },
        {
          text: "",
          des: "111",
          src: require("../../assets/images/4.png"),
          style: null,
          unit: "",
          unitStyle: null,
          textStyle: null,
          desStyle: null,
          srcStyle: null,
        },
      ],
      sCardList: [
        {
          //文字
          text: "20",
          //描述
          des: "滤芯剩余>",
          //图片
          src: "",
          //样式
          style: null,
          //单位
          unit: "%",
          //单位样式
          unitStyle: null,
          //文字样式
          textStyle: null,
          //描述样式
          desStyle: null,
          //图片样式
          srcStyle: null,
        },
        {
          type: "line",
          lineStyle: null,
        },
        {
          text: "1200",
          des: "净化空气 >",
          src: "",
          style: null,
          unit: "m2",
          unitStyle: null,
          textStyle: null,
          desStyle: null,
          srcStyle: null,
        },
        {
          type: "line",
          lineStyle: null,
        },
        {
          text: "800",
          des: "过滤颗粒物 >",
          src: "",
          style: null,
          unit: "mg",
          unitStyle: null,
          textStyle: null,
          desStyle: null,
          srcStyle: null,
        },
      ],
      tCardList: [
        {
          //文字
          text: "深圳",
          //描述
          des: "室外PM2.5",
          //图片
          src: "",
          //样式
          style: {
            color: "red",
          },
          //单位
          unit: "",
          //单位样式
          unitStyle: null,
          //文字样式
          textStyle: null,
          //描述样式
          desStyle: null,
          //图片样式
          srcStyle: null,
        },
        {
          text: "13",
          des: "",
          src: "",
          style: null,
          unit: "m2",
          unitStyle: null,
          textStyle: null,
          desStyle: null,
          srcStyle: null,
        },
      ],
    };
  },
  watch: {
    //监听方式
    getDevInfoRes() {
      console.log(this.getDevInfoRes);
    },
    "$store.state.wifi.deviceInfo": {
      deep: true,
      handler: function (newValue, oldValue) {
        console.log(newValue);
        console.log(oldValue);
      },
    },
  },
  computed: {
    ...mapGetters({ getDevInfoRes: "wifi/getDevInfoRes" }),
  },
  created() {
    // let a = {
    //   x:()=>{
    //     console.log(this)
    //   },
    //   y:function(){
    //     console.log(this)
    //   }
    // }
    // let b = new Object;
    // a.x();
    // a.y();

    // console.log("aaa",a)
    // console.log("bbb",b);
    let devid = "",
      sid = "",
      body = "";
    //WifiManage使用方式
    WifiManage.getDeviceEvent((res) => {
      //todo
      console.log("getDeviceEvent => " + res);
    });
    WifiManage.getDevInfo(devid, sid, body, (res) => {
      //todo
      console.log("getDevInfo => " + res);
    });
    WifiManage.setDeviceInfo(devid, body, (res) => {
      //todo
      console.log("setDeviceInfo => " + res);
    });
  },
  mounted() {
    // this.marginTop = this.$refs.topbars.getTopBarHeigth();
  },
  methods: {
    ...mapActions({
      setDevInfoRes: "wifi/setDevInfoRes",
    }),
    test() {
      //设置数据方式
      this.$store.dispatch("wifi/setDevInfoRes", 1);
      this.$store.commit("wifi/setDevInfoRes", 1);
      this.setProductCode(1);
    },
    imgClick(item) {
      this.consoleInfo = item.src;
    },
    desClick(item) {
      this.consoleInfo = item.des;
    },
    textClick(item) {
      this.consoleInfo = item.text;
    },
    handleTouchEndOne(e) {
      console.log("++++++++++++++++", e);
      this.$nextTick(() => {
        this.percentVal = e;
      });
    },
  },
};
</script>

<style lang="less" >
.van-button--large {
  color: var(--red_bg_notice);
}
.wifi-demo {
  background-color: gainsboro;
  display: flex;
  flex-direction: column;
}
</style>
